<style>
  .card{
    margin: 12px 0;
    text-align: left;
  }
  .has-hover{
    color: black;
  }
  a.has-hover :hover{
    color: #2d8cf0;
  }
  .fixedCard{
    border-radius: 4px;
    font-size: 14px;
    position: fixed;
    transition: all .2s ease-in-out;
    width: 22%;
    text-align: left;
  }
  .card-section{
    text-align: left;
  }
  .card-h4{
    margin-bottom: 10px;
  }
  .card-p{
    text-align: justify;
    text-indent: 30px;
  }
  .card-img-de{
    width: 100%;
    display: block;
  }
  .comment-img{
    float: left;
    margin-left: -48px;
  }
  .comment-img img{
    width: 36px;
    height: 36px;
  }
  .comment-time{
    font-size: 10px;
    color:darkgrey;
  }
  .writer-count{
    font-weight: bold;
    margin-top: 4px;
    font-size: 16px;
  }
  .card-foot-art{
    color: #515a6e;
  }
</style>
<template>
  <div>
  <Row style="padding:10px">
    <Col span="17">
      <Card :bordered="false" class="card" dis-hover>
        <!--<section slot="title" class="card-section">
          <Icon type="ios-happy-outline" size="20"></Icon>
          <span style="color:#ef4868;">EvelynHU</span>
          <span style="font-size: 10px;color:darkgrey;">04-29 09:45</span>
          <span class="ivu-tag ivu-tag-green ivu-tag-checked" style="float: right;">置顶</span>
        </section>-->
        <div>
          <h4 class="card-h4" style="text-align: center;">锦瑟</h4>
          <img src="../../assets/img/laison.png" alt="" class="card-img-de"/>
          <p class="card-p" v-for="item in articleList" :key="item.index">这是文章内容：锦瑟无端五十弦，一弦一柱思华年。庄生晓梦迷蝴蝶，望帝春心托杜鹃。沧海月明珠有泪，蓝田日暖玉生烟。此情可待成追忆，只是当时已惘然。</p>
        </div>
      </Card>
      <!--评论列表-->
      <div v-for="item in articleList" :key="item.index">
        <div class="comment-img">
          <img src="https://dev-file.iviewui.com/avatar_default/avatar" alt="">
        </div>
        <Card class="card" :bordered="false" dis-hover>
          <section slot="title" class="card-section">
            <Icon type="ios-happy-outline" size="20"></Icon>
            <span>EvelynHU</span>
            <span class="comment-time">04-29 09:45</span>
          </section>
          <div>
            <p>感觉不错，支持下！！！</p>
          </div>
        </Card>
      </div>
    </Col>
    <Col span="6" offset="1">
    <div class="fixedCard">
      <Card title="文章作者" :padding="2" dis-hover>
        <Card dis-hover :bordered="false" style="margin: 0 16px;">
          <section slot="title" class="card-section">
            <span slot="prepend" class="dev-user-pop-user-info-avatar ivu-avatar ivu-avatar-square ivu-avatar-large ivu-avatar-image">
               <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3448484253,3685836170&fm=27&gp=0.jpg"
                    alt="" style="width: 60px;height: 60px;line-height: 60px;border-radius: 2px;">
            </span>
            <div style="color:#ef4868;display: inline-block;height: 60px;line-height: 60px; vertical-align: middle;margin-left: 12px;">
              <span style="font-weight: bold;font-size: 14px;">
             EvelynHU
            </span>
            </div>
          </section>
          <div style="text-align: center;">
            <Row>
              <Col span="8">
              <span style="color: #808695;">问题</span>
              <p class="writer-count">0</p>
              </Col>
              <Col span="8">
              <span style="color: #808695;">文章</span>
              <p class="writer-count">100</p>
              </Col>
              <Col span="8">
              <span style="color: #808695;">已关注</span>
              <p class="writer-count">1000</p>
              </Col>
            </Row>
          </div>
        </Card>
        <div :padding="0" shadow dis-hover style="padding: 16px;">
          <i-button style="width: 45%;"><Icon type="ios-brush-outline" />提问</i-button>
          <i-button style="width: 45%;float: right;"><Icon type="md-add" />关注</i-button>
        </div>
      </Card>
      <Card title="文章信息" dis-hover :padding="2" style="margin-top: 10px;padding-bottom: 16px;">
        <div style="color: #808695;margin-left: 5%; font-weight: 400; font-family: Ionicons;
        font-style: normal;font-variant: normal;text-rendering: auto;">
          <p style="margin:5px 0;"><Icon type="ios-clock-outline" /> 发布时间: 04-29 18:00</p>
          <p style="margin:5px 0;"><Icon type="ios-book-outline" /> 阅读数: 1200</p>
        </div>
        <div class="ivu-tag ivu-tag-default ivu-tag-border ivu-tag-checked card-foot-art" style="margin-left: 5%;margin-top: 16px;">
          <span>这是个底部标签</span>
        </div>
      </Card>
      <Card :padding="10" dis-hover style="margin-top: 10px;text-align: center;">
        <Row>
          <Col span="8">
            <a href="javascript:void(0)" style="color: #808685;"><Icon type="ios-heart-outline" />收藏</a>
          </Col>
          <Col span="8">
            <a href="javascript:void(0)" style="color: #808685;"><Icon type="ios-chatbubbles-outline" />添加评论</a>
          </Col>
          <Col span="8">
            <a href="javascript:void(0)" style="color: #808685;"><Icon type="ios-open-outline" />分享</a>
          </Col>
        </Row>
      </Card>
      <!--<Card style="margin-top: 10px;text-align: left;">
        <Anchor show-ink>
          <AnchorLink href="#1" title="当前位置1" />
          <AnchorLink href="#2" title="当前位置2" />
          <AnchorLink href="#3" title="API">
            <AnchorLink href="#Anchor_props" title="Anchor props" />
            <AnchorLink href="#Anchor_events" title="Anchor events" />
            <AnchorLink href="#AnchorLink_props" title="AnchorLink props" />
          </AnchorLink>
        </Anchor>
      </Card>-->
    </div>
    </Col>
  </Row>

  </div>
</template>

<script>
  let Base64 = require('js-base64').Base64;
  export default {
    data () {
      return {
        articleList:[
          {
            index:1
          },
          {
            index:2
          },
          {
            index:3
          },
          {
            index:4
          },
          {
            index:5
          }
        ]
      };
    },
    methods: {
      init () {

      }
    },
    mounted () {
      this.init();
    }
  };
</script>
